<template>
    <!-- {{ $router.options.routes }} -->
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        :default-active="$route.path" text-color="#fff" unique-opened :router=true>
        <!--需要选中菜单后进行路由跳转-->
        <template v-for='item in $router.options.routes'>
            <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta?item.meta.show==true:''">
                <component :is="item.meta?item.meta.icon:''" class="icon"></component>
                <span>{{ item.meta ?item.meta.title:''}}</span>
            </el-menu-item>


            <el-sub-menu :index="item.path"
                v-if="item.children != undefined && item.meta ? item.meta.show == true : ''">
                <template #title>
                    <!--展示图标 动态加载-->
                    <component :is="item.meta ? item.meta.icon : ''" class="icon"></component>
                    <span>{{ item.meta ? item.meta.title : '' }}</span>
                </template>
                <el-menu-item-group>
                    <template v-for="child in item.children">
                        <el-menu-item :index="child.path" v-if="child.meta ?child.meta.show == true:''">
                            <component :is="child.meta ? child.meta.icon : ''" class="icon"></component>
                            <span>{{ child.meta? child.meta.title: '' }}</span>
                        </el-menu-item>

                    </template>
                </el-menu-item-group>

            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup lang="ts">

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse){
    width: 200px;
    /* min-height: 532px; */
    min-height: calc(100vh - 46px);
}
.icon{
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
</style>